<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录系统</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <!-- 登录页面 -->
        <div id="login-page" class="page active">
            <div class="login-container">
                <h1>欢迎登录</h1>
                <div class="tabs">
                    <button class="tab-btn active" data-tab="password">账号密码登录</button>
                    <button class="tab-btn" data-tab="sms">短信验证码登录</button>
                </div>
                
                <!-- 账号密码登录表单 -->
                <form id="passwordLoginForm" class="login-form active">
                    <div class="form-group">
                        <input type="text" id="username" placeholder="用户名" required>
                    </div>
                    <div class="form-group">
                        <input type="password" id="password" placeholder="密码" required>
                    </div>
                    <button type="submit" class="btn-primary">登录</button>
                    <div class="form-footer">
                        <span>还没有账号？</span>
                        <a href="#" data-page="register-page">立即注册</a>
                    </div>
                </form>

                <!-- 短信验证码登录表单 -->
                <form id="smsLoginForm" class="login-form">
                    <div class="form-group">
                        <input type="text" id="phone" name="phone" placeholder="手机号" required>
                    </div>
                    <div class="form-group sms-code-group">
                        <input type="text" id="smsCode" name="smsCode" placeholder="验证码" required 
                               maxlength="6" pattern="[0-9]*" inputmode="numeric">
                        <button type="button" id="sendSmsBtn" class="btn-secondary">发送验证码</button>
                    </div>
                    <button type="submit" class="btn-primary">登录</button>
                    <div class="form-footer">
                        <span>还没有账号？</span>
                        <a href="#" data-page="register-page">立即注册</a>
                    </div>
                </form>
            </div>
        </div>

        <!-- 注册页面 -->
        <div id="register-page" class="page">
            <div class="register-container">
                <h1>用户注册</h1>
                <form id="register-form" class="register-form">
                    <div class="form-group">
                        <input type="text" id="register-username" placeholder="用户名" required>
                    </div>
                    <div class="form-group">
                        <input type="password" id="register-password" placeholder="密码" required>
                    </div>
                    <div class="form-group">
                        <input type="text" id="register-phone" placeholder="手机号" required>
                    </div>
                    <div class="form-group">
                        <input type="email" id="register-email" placeholder="邮箱" required>
                    </div>
                    <button type="submit" class="btn-primary">注册</button>
                    <div class="form-footer">
                        <span>已有账号？</span>
                        <a href="#" data-page="login-page">返回登录</a>
                    </div>
                </form>
            </div>
        </div>

        <!-- 用户信息页面 -->
        <div id="user-page" class="page">
            <div class="user-container">
                <h1>用户信息</h1>
                <div class="user-info">
                    <p>用户名：<span id="user-username"></span></p>
                    <p>手机号：<span id="user-phone"></span></p>
                    <p>邮箱：<span id="user-email"></span></p>
                </div>
                <button id="logout-btn" class="btn-primary">退出登录</button>
            </div>
        </div>

        <div id="messageAlert" class="message-alert"></div>
    </div>
    <script src="js/main.js"></script>
</body>
</html> 